import React from 'react';
import ReactECharts from 'echarts-for-react';

interface EchartsGaugeProps {
  percent: number;
  height?: number;
  color?: any;
  statistic?: {
    title?: {
      style?: any;
      formatter?: () => string;
    };
    content?: {
      style?: any;
      formatter?: () => string;
    };
  };
  [key: string]: any;
}

const EchartsGauge: React.FC<EchartsGaugeProps> = ({
  percent,
  height = 400,
  color,
  statistic,
  ...rest
}) => {
  const getColor = () => {
    if (color && typeof color === 'object') {
      if (color.range) {
        // 处理颜色范围
        const value = percent * 100;
        for (let i = 0; i < color.range.length; i++) {
          if (value <= color.range[i]) {
            return color.color[i];
          }
        }
        return color.color[color.color.length - 1];
      }
    }
    return color || '#1890ff';
  };

  const option = {
    series: [
      {
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '75%'],
        radius: '90%',
        min: 0,
        max: 100,
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [
              [0.25, '#FF6E76'],
              [0.5, '#FDDD60'],
              [0.75, '#58D9F9'],
              [1, '#7CFFB2']
            ]
          }
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '12%',
          width: 20,
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto'
          }
        },
        axisTick: {
          length: 12,
          lineStyle: {
            color: 'auto',
            width: 2
          }
        },
        splitLine: {
          length: 20,
          lineStyle: {
            color: 'auto',
            width: 5
          }
        },
        axisLabel: {
          color: '#464646',
          fontSize: 20,
          distance: -60,
          rotate: 'tangential',
          formatter: function (value: number) {
            if (value === 87.5) {
              return 'A+';
            } else if (value === 62.5) {
              return 'A';
            } else if (value === 37.5) {
              return 'B';
            } else if (value === 12.5) {
              return 'C';
            }
            return '';
          }
        },
        title: {
          offsetCenter: [0, '-10%'],
          fontSize: 20
        },
        detail: {
          fontSize: 30,
          offsetCenter: [0, '-35%'],
          valueAnimation: true,
          formatter: function (value: number) {
            return Math.round(value) + '%';
          },
          color: 'auto'
        },
        data: [
          {
            value: percent * 100,
            name: statistic?.title?.formatter ? statistic.title.formatter() : '使用率'
          }
        ]
      }
    ]
  };

  return (
    <ReactECharts
      option={option}
      style={{ height: `${height}px`, width: '100%' }}
      {...rest}
    />
  );
};

export default EchartsGauge;
